<template>
	<view class="app">
		<view class="header-box">
			<view>
				<!--图片-->
				<image style="width: 100px; height: 100px;" mode="widthFix"
					src="https://img.youxuanan.com/crmebimage/public/product/2024/09/12/5ae1947d31cb431c9581a1996158d2d9rtnyeifxun.png">
				</image>
				<view class="title">人脸实名认证</view>
				<view class="tips">根据实名制下单要求，使用信用免押服务前你需要通过实名认证，并授权如下信息</view>
			</view>
		</view>

		<view class="input">
			<view class="sub_title">姓名与支付宝实名信息相互关联且不可更改</view>
			<view class="input_item">
				<view class="input_item_goods">
					<view>姓名</view>
					<input type="text" placeholder="请输入支付宝绑定的姓名" @input="onInputName" />
				</view>
			</view>

			<view class="input_item" style="border-top: 1px solid #EBEEF5;">
				<view class="input_item_goods">
					<view>身份证号</view>
					<input type="text" placeholder="请输入支付宝绑定的身份证号码" @input="onInputIdCard" />
				</view>
			</view>
		</view>

		<button class="btn" @click="toFace">进入人脸实名认证</button>
	</view>
</template>

<script>
	import {
		IdCardRoleVerify,
		aliminiLogin
	} from '@/api/user.js';
	import {
		EFaceVerify,
		pollingSerchResult,
		toCreateOrderForm,
		sevenRealnamed
	} from '@/api/order.js';
	export default {
		data() {
			return {
				name: '',
				idCard: '',
				phone: uni.getStorageSync('aliPhone'),
				userId: uni.getStorageSync('UID'),
				orderNo: '',
				flowId: ''
			}
		},
		onLoad(options) {
			this.orderNo = options.orderNo;
		},
		methods: {
			toFace() {
				if (!this.name) {
					uni.showToast({
						title: '请输入姓名',
						duration: 2000
					});
					return;
				}
				if (!this.idCard) {
					uni.showToast({
						title: '请输入身份证号',
						duration: 2000
					});
					return;
				}


				my.getAuthCode({
					scopes: 'id_verify',
					success: (authCodeRes) => {
						const authCode = authCodeRes.authCode;
						console.log(authCode, 'code')
						aliminiLogin({
								authCode: authCode,
								phone: uni.getStorageSync('aliPhone')
							})
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: res.data.desc,
										duration: 2000
									});
									this.toVerifyMyRole(res.data.accessToken);
								}

							})
					}
				})
			},
			toVerifyMyRole(token) {
				let submit = {
					idCard: this.idCard,
					phone: this.phone,
					realName: this.name,
					userId: this.userId,
					accessToken: token,
				}
				IdCardRoleVerify(submit)
					.then(res => {
						//去E签宝人脸
						if (res.code == 200 && res.data.flag) {
							this.EFaceAIVerify();
						} else {
							uni.showToast({
								title: res.data.desc,
								duration: 2000
							});
						}
					})
			},
			//去人脸
			EFaceAIVerify() {
				let that = this;
				EFaceVerify({
						faceauthMode: 'ESIGN',
						callBackUrl: 1,
						orderNo: this.orderNo
					})
					.then(res => {
						if (res.code == 200) {
							console.log(res, '跳转的链接')
							uni.setStorage({
								key: 'flowId',
								data: res.data.flowId,
								success: function() {
									var originalUrl = res.data.originalUrl;
									my.ap.navigateToAlipayPage({
										path: encodeURI(originalUrl),
										success: () => {
											//轮询人脸状态
											that.queryResults();
										},
										fail: (error) => {
											my.alert({
												content: '失败：' + JSON.stringify(error)
											});
										}
									})
								}
							});

						}
					})
			},

			//轮询查询人脸识别结果
			queryResults() {
				let that = this;
				const flowId = uni.getStorageSync('flowId');
				let checkedCode = setInterval(() => {
					
					pollingSerchResult({
							flowId: flowId
						})
						.then(rusult => {
							if (rusult.data) {
								uni.removeStorageSync('flowId');
								clearInterval(checkedCode)
								that.toPayMyPhone();
							}
						})

					// uni.getStorage({
					// 	key: 'flowId',
					// 	success: function(res) {
					// 		console.log(res,'轮询结果')
					// 		if (res.data) {
					// 			pollingSerchResult({
					// 					flowId: res.data
					// 				})
					// 				.then(rusult => {
					// 					if (rusult.code == 200) {
					// 						uni.removeStorageSync('flowId');
					// 						clearInterval(checkedCode)
					// 						that.toPayMyPhone();
					// 					}
					// 				})
					// 		}

					// 	}
					// });
				}, 3000)
			},


			//下单流程---->支付宝
			toPayMyPhone() {
				toCreateOrderForm(this.orderNo)
					.then(res => {
						console.log(res, '下单结束')
						if (res.code == 200) { //准备唤起芝麻免押
							my.tradePay({
								orderStr: res.data
									.orderStr, // 完整的支付参数拼接成的字符串，从 alipay.fund.auth.order.app.freeze 接口获取
								success: (rusult) => {
									console.log(rusult, '免押成功');
									if (rusult.resultCode == 9000) {
										uni.redirectTo({
											url: '/pages/other/orderSuccess'
										})
									} else {
										uni.showToast({
											title: '免押失败',
											icon: 'none'
										})
									}
								},
								fail: (rusult) => {
									console.log('免押失败');
									console.log(JSON.stringify(rusult), '不是JOSN');
									console.log(JSON.stringify(rusult), 'JSON');
									uni.showToast({
										title: rusult.memo,
										icon: 'none'
									})
								}
							});
						}
					})
			},

			onInputName: function(event) {
				this.name = event.target.value;
			},
			onInputIdCard: function(event) {
				this.idCard = event.target.value;
			}
		}
	}
</script>

<style scoped lang="scss">
	.app {
		.header-box {
			background-color: #0f9bf7;
			height: 300px;
			text-align: center;
			color: white;
			padding: 0 25px;
			display: flex;
			align-items: center;

			.title {
				font-size: 1.2em;
				font-weight: bold;
				margin: 15px 6px;
			}

			.tips {
				font-size: 1em;
			}
		}


		.input {
			width: 85%;
			margin: 0 auto;
			margin-top: -45px;
			border-radius: 15px;
			padding: 10px 15px;
			background-color: rgba(255, 255, 255, 0.8);

			.sub_title {
				color: #2cacdb;
				text-align: center;
				padding: 8px 0;
			}

			.input_item {
				padding: 8px 0;

				.input_item_goods {
					display: flex;
					align-items: center;
					justify-content: left;

					view {
						width: 20%;
					}

					input {
						width: 80%;
						padding-left: 15px;
					}
				}

			}
		}


		.btn {
			width: 90%;
			height: auto;
			margin: 30px auto;
			background-color: #119bfb;
			color: white;
			border-radius: 35px;
			padding: 10px 0;
		}

	}
</style>